import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState, useCallback } from 'react';
import { Card, Tabs, Button } from 'antd';
import type { TabsProps } from 'antd';
import {
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormDigit,
    ProFormRadio,
    ProFormSelect,
    ProFormItem,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProLayout,
} from '@ant-design/pro-components';

import { ToolsHeader, CategoryList, QiniuFileUpload, Tags } from '../../components';
import { localSharingGetSharedObject, localSharingSaveSharedObject, sharingCreateSharedObject } from '../../services';
import { getNowFormatDate, uuid } from '../../utils';
import { BindSharedPanel } from './bind-shared-panel';

export interface SharingPanelProps {
    style?: CSSProperties;
    objectType: string;
    referId: string;
    init?: { name?: string, icon?: string, description?: string };
    onFinish: () => Promise<void> | void;
}

export const SharingPanel: React.FC<SharingPanelProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [icon, setIcon] = useState<{ hash: string, key: string, fileName: string } | null>(null);

    const [objectTags, setObjectTags] = useState<Array<string>>(['模型设计']);


    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '新建分享',
            children: <SharingForm {...props}></SharingForm>,
        },
        {
            key: '2',
            label: '关联已有分享',
            children: <BindSharedPanel {...props}></BindSharedPanel>,
        }
    ];

    return (
        <Container style={props.style}>
            <Tabs defaultActiveKey="1" items={items} onChange={(key: string) => {
                console.log(key);
            }} />
        </Container>
    );
}

const Container = styled.div`
    width: 100%;
    height: 100%;
    padding: 6px 6px;
    gap: 10px;
`;

export interface SharingFormProps {
    style?: CSSProperties;
    objectType: string;
    referId: string;
    init?: { name?: string, icon?: string, description?: string };
    onFinish: () => Promise<void> | void;
}

export const SharingForm: React.FC<SharingFormProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [icon, setIcon] = useState<string | null>(null);

    const [objectTags, setObjectTags] = useState<Array<string>>(['模型设计']);

    const requestCallback = useCallback(async () => {
        if (!props.init) return {};
        return {
            name: props.init.name,
            icon: props.init.icon,
            description: props.init.description,
        }
    }, [props.init]);

    const onFinish = useCallback(async (values) => {
        //TODO 校验
        let name = values.name;
        if (!name || name.length <= 0 || name === '') {
            return;
        }
        console.log(values);
        let res = await sharingCreateSharedObject({
            name: name,
            icon: icon ? icon : '',
            objectType: props.objectType,
            tags: objectTags,
            description: values.description ? values.description : '',
        });
        console.log(res);
        if (!res) {
            //失败
            return;
        }
        //
        let localRes = await localSharingSaveSharedObject(props.objectType, props.referId, res.identifier);
        await props.onFinish();
    }, [props.objectType, props.referId, props.onFinish]);

    return (
        <FormContainer style={props.style}>
            <ProForm
                style={{
                    width: '100%'
                }}
                request={requestCallback}
                onFinish={onFinish}
                submitter={false}
            >
                <ProFormText
                    rules={[{ required: true }]}
                    width="xl" fieldProps={{}} name="name" label="名称" />
                <ProFormItem
                    extra="只能上传jpg/png文件,且不大于1MB"
                    label="图标"
                    name="icon">
                    <QiniuFileUpload
                        title={'上传图标'}
                        listType={'picture-card'}
                        accept={"image/png, image/jpeg"}
                        max={1}
                        isPicture={true}
                        filePath={`g01/shared/images/${getNowFormatDate('')}`}
                        onChange={async (files) => {
                            console.log(files);
                            if (files && files.length > 0) {
                                setIcon(files[0]);
                            } else {
                                setIcon(null);
                            }
                        }}></QiniuFileUpload>
                </ProFormItem>
                <ProFormItem
                    label="标签"
                    name="domainTags">
                    <Tags value={objectTags} onChange={(value) => {
                        setObjectTags(value);
                    }}></Tags>
                </ProFormItem>
                <ProFormTextArea width="xl" fieldProps={{ rows: 6 }} label="描述" name="description" />
                <ProFormItem>
                    <Button type="primary" htmlType="submit">
                        分享
                    </Button>
                </ProFormItem>
            </ProForm>
        </FormContainer>
    );
}


const FormContainer = styled.div`
    width: 100%;
    height: 100%;
`;